import * as React from 'react'
import { InputItem, Toast, Modal } from 'antd-mobile'
import { NavBar, Item, Button, Radio, Icon } from 'components'
import { formatPriceStr } from '../../methods'
import './ExChangeBeans.less'
import { post } from '../../../../utils'

export default class ExChangeBeans extends React.Component<any, any> {

    public state = {
        hdNumber: '', // 领取恒豆数量,
        isSelectPro: this.props.isAutoSelect || false,
        successModal: false,
    }
    public componentDidMount () {
        Toast.loading('')
        const id = this.props.match.params.id
        if (!id) {
            this.props.history.goBack()
        }
        this.getData(id)
    }
    public getData = (id: string) => {
        const { userInfo, SET_MYUTILS_HYPODETAIL } = this.props
        post('usersapi/userZqDrawShow', {
            userId: userInfo.id,
            id: id
        }).then((data: any) => {
            SET_MYUTILS_HYPODETAIL(data)
            Toast.hide()
        })
    }
    public render(): JSX.Element {
        const { hdNumber, isSelectPro, successModal } = this.state
        const { isAutoSelect, userHypoDetail } = this.props
        return (
            <div className="exChangeBeans">
                <NavBar
                    title={<div style={{fontSize: '0.97rem', color: '#222'}}>领取恒豆</div>}
                    fixed={true}
                />
                <div className="exChangeBeans_transferInfo">
                    <Item 
                        className="exChangeBeans_transferInfo_item" 
                        title={<div className="exChangeBeans_transferInfo_title">债权人</div>}
                        value={<div className="exChangeBeans_transferInfo_value">{userHypoDetail.name}</div>}
                    />
                    <Item 
                        className="exChangeBeans_transferInfo_item" 
                        title={<div className="exChangeBeans_transferInfo_title">总恒豆数量</div>}
                        value={<div className="exChangeBeans_transferInfo_value">{userHypoDetail.arrears_price && formatPriceStr(userHypoDetail.arrears_price.toString())}</div>}
                    />
                </div>
                <div className="exChangeBeans_content">
                    <div className="exChangeBeans_content_title">领取恒豆数量</div>
                    <div className="exChangeBeans_content_inputWrap">
                        <div>
                            <InputItem
                                type="number"
                                value={hdNumber}
                                defaultValue={hdNumber}
                                className="exChangeBeans_content_inputWrap_input"
                                clear={(hdNumber.length > 0) ? true : false}
                                onChange={this.handleInputChange}
                                placeholder="请输入恒豆数量"
                            />
                        </div>
                        {
                            (hdNumber.length > 0) 
                            ? <div/>
                            : <div onClick={this.handleInputAll}>全部</div>
                        }
                    </div>
                    <div className="exChangeBeans_content_balance">可领取恒豆数量: {userHypoDetail.surplus_price && formatPriceStr(userHypoDetail.surplus_price.toString())}恒豆</div>
                </div>
                <div className="exChangeBeans_content_protocol">
                    <Radio checked={(isAutoSelect) ? isAutoSelect : isSelectPro} onChange={this.handleSelectPro}>
                        同意
                    </Radio>
                    <a href="https://www.baidu.com">《恒豆购买协议》</a>
                    <a href="https://www.baidu.com">《服务协议》</a>
                </div>
                <div className="exChangeBeans_operation">
                    <div className="exChangeBeans_operation_select">
                        <Radio onChange={this.handleRadioChange} checked={isAutoSelect}>
                            自动勾选协议
                        </Radio>
                    </div>
                    <Button className="exChangeBeans_operation_btn" disabled={(hdNumber.length > 0 && hdNumber && isSelectPro) ? false : true} onClick={this.handleSubmitExChange}>确定兑换</Button>
                </div>
                <Modal
                    className="exChangeBeans_successModal"
                    visible={successModal}
                    transparent={true}
                    maskClosable={false}
                    onClose={() => {this.onClose('successModal')}}
                >
                    <div className="exChangeBeans_successModal_content">
                        <img src={require('../../../../assets/ReceiveHD_success.png')} />
                        <div className="exChangeBeans_successModal_Textcontent">
                            <p>恭喜您成功领取恒豆</p>
                            <p className="DINPro">{hdNumber && formatPriceStr(hdNumber.toString())}</p>
                            <p>小主，领取的恒豆将即刻到账<br/>请注意查收哟~</p>
                            <div onClick={() => {Toast.info('跳转中...', 1, () => {this.props.history.goBack()})}}>
                                谢谢我知道了
                            </div>
                            <Icon onClick={() => {Toast.info('跳转中...', 1, () => {this.props.history.goBack()})}} type="error" className="exChangeBeans_successModal_icon" />
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
    private onClose = (key: any) => {
        this.setState({
            [key]: false
        })
    }
    private handleSubmitExChange = () => {
        Toast.loading('')
        post('fadadaapi/userMarkPact', {
            id: this.props.match.params.id,
            price: this.state.hdNumber
        }).then((data: any) => {
            this.setState({
                successModal: true
            })
            Toast.hide()
        })
    }
    private handleSelectPro = (e: any) => {
        const { SET_MYUTILS_HYPOAUTOSELECT } = this.props
        this.setState({
            isSelectPro: e
        })
        SET_MYUTILS_HYPOAUTOSELECT(false)
    }
    private handleRadioChange = (e: any) => {
        const { SET_MYUTILS_HYPOAUTOSELECT } = this.props
        SET_MYUTILS_HYPOAUTOSELECT(e)
        this.setState({
            isSelectPro: e
        })
    }

    private handleInputChange = (value: string) => {
        let val = value
        if (val === '0') {
            return
        }
        if (value && (parseInt(value, 10) > parseInt(this.props.userHypoDetail.surplus_price, 10))) {
            val = this.props.userHypoDetail.surplus_price
        }
        this.setState({
            hdNumber: val
        })
    }
    private handleInputAll = () => {
        this.setState({
            hdNumber: this.props.userHypoDetail.surplus_price
        })
    }
}